<!--
 * Copyright (c) KylinSoft  Co., Ltd. 2024.All rights reserved.
 * PilotGo-plugin-a-tune licensed under the Mulan Permissive Software License, Version 2. 
 * See LICENSE file for more details.
 * Author: zhanghan2021 <zhanghan@kylinos.cn>
 * Date: Fri Jan 12 14:12:37 2024 +0800
-->
<template>
  <div class="container">
    <!-- 任务列表 -->
    <div class="container-table" v-show="!showDetail">
      <taskList @atuneDetail="handleAtuneDetail"> </taskList>
    </div>
    <router-view />
  </div>

  <!-- 调优模板详情 -->
  <el-dialog title="调优模板信息" width="50%" v-model="showDialog">
    <atuneTemplete :is-tune="false" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog">
    </atuneTemplete>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import taskList from "./taskList.vue";
import atuneTemplete from "@/components/atuneTemplete.vue";
import { Task, Atune } from "@/types/atune";
import { useRoute } from "vue-router";
import { onBeforeRouteUpdate } from "vue-router";
import { useRouterStore } from "@/store/router";

const showDialog = ref(false);
const selectedEditRow = ref();
const showDetail = ref(false);

// 每次刷新界面都需重新判断路由
onMounted(() => {
  showDetail.value = useRouterStore().showRoute(useRoute().fullPath, "detail");
});
// 组件内守卫
onBeforeRouteUpdate((to: { fullPath: string;[propName: string]: any; }, _from: {}, next: Function) => {
  showDetail.value = useRouterStore().showRoute(to.fullPath, "detail");
  next();
});

// 关闭dialog弹框
const closeDialog = () => {

  showDialog.value = false;
};

// 查看模板详情
const handleAtuneDetail = (taskRow: Task | Atune) => {
  selectedEditRow.value = taskRow.tune;
  showDialog.value = true;
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(100% - 44px - 10px);

  &-table {
    width: 98%;
    margin: 0 auto;
    height: 100%;
  }
}
</style>
